<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div">hello</div>
</body>
<!-- vue 2.x -->
<script>
    let data = {
        msg: 'hello',
        name: 'sss',
    }

    let vm = {}
    for (let key in data) {
        if (data.hasOwnProperty(key)) {
            Object.defineProperty(vm, key, {
                enumbable: true,
                get () {
                    console.log('get')
                    return data[key];
                },
                set (value) {
                    console.log('set', value)
                    if (value === data[key]) {
                        return 
                    }
                    data[key] = value;
                    div.innerText = value;
                }
            })
        }
    }

</script>

<script>
    // vue3
    // let data = {
    //     name: 'ssc',
    //     age: 12,
    // }
    // let vm = new Proxy(data, {
    //     get (target, key) {
    //         console.log('get', target[key]);
    //         return target[key]
    //     },

    //     set (target, key, newValue) {
    //         console.log('set', target[key]);
    //         if (newValue === target[key]) {
    //             return 
    //         }
    //         target[key] = newValue;
    //         div.innerText = newValue;
    //     }
    // })
</script>
</html>